<template>
  <div class="choose-water-shop-main base-main">
    <!--地址-->
    <div class="address-box pdlr15 pr bgcFFF">
      <div class="address-be pr">
        <van-row>
          <van-col span="1">
            <i class="color7E82F6 p-position iconfont icondizhibiaoshix"></i>
          </van-col>
          <van-col span="22">
            <div class="msg p-position">
              <p>莉萝小 <span>13958483448</span></p>
              <p>广东省广州市花都区迎宾大道116号索弗大厦</p>
            </div>
          </van-col>
        </van-row>
      </div>
    </div>
    <!--地址-->

    <!--配送范围内-->
    <div class="confine-to bgcFFF mt10">
      <div class="title-box">
        <p class="title color45454D fs15 line-bottom">
          配送范围内
          <span class="color666 fs12">{{dataArr.length}}家</span>
          <span class="flr color999 fs12">桶装水免费配送到家</span>
        </p>
      </div>

      <div class="shop-box">
        <WaterShop
          :shopArr="dataArr"
          @chooseShop="chooseShop"/>
      </div>
    </div>
    <!--配送范围内-->

    <!--配送范围外-->
    <div class="confine-to bgcFFF mt10">
      <div class="title-box">
        <p class="title color45454D fs15 line-bottom">
          配送范围外
          <span class="color666 fs12">{{dataArr.length}}家</span>
          <span class="flr color999 fs12">已超出配送范围 需自提</span>
        </p>
      </div>

      <div class="shop-box">
        <WaterShop
          :shopArr="dataArr"
          @chooseShop="chooseShop"/>
      </div>
    </div>
    <!--配送范围外-->
  </div>
</template>

<script type="text/ecmascript-6">
  import WaterShop from '../../components/WaterShop.vue'
  export default {
    components:{
      WaterShop
    },
    data() {
      return {
        dataArr: [
          {
            id: 0,
            type: 0,
            pic:'https://wenhui.whb.cn/u/cms/www/202007/28082915glng.jpg',
            name: '花都区迎宾大道店',
            phone: '020-86796968',
            address: '花都区迎宾大道119号润龙大厦二楼',
            distance: '3.4'
          },
          {
            id: 2,
            type: 0,
            pic:'https://wenhui.whb.cn/u/cms/www/202007/28082915glng.jpg',
            name: '花都区迎宾大道店',
            phone: '020-86796968',
            address: '花都区迎宾大道119号润龙大厦二楼',
            distance: '3.4'
          },
          {
            id: 3,
            type: 1,
            pic:'https://wenhui.whb.cn/u/cms/www/202007/28082915glng.jpg',
            name: '花都区迎宾大道店',
            phone: '020-86796968',
            address: '花都区迎宾大道119号润龙大厦二楼',
            distance: '3.4'
          },
          {
            id: 4,
            type: 1,
            pic:'https://wenhui.whb.cn/u/cms/www/202007/28082915glng.jpg',
            name: '花都区迎宾大道店',
            phone: '020-86796968',
            address: '花都区迎宾大道119号润龙大厦二楼',
            distance: '3.4'
          },
        ],
      }
    },
    methods: {
      chooseShop(item) {
        console.log('item', item);
      }
    },
  }
</script>

<style scoped lang="scss">
 @import "../../assets/css/chooseWaterShop.scss";
</style>
